<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能对话助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .bg-gradient {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <div class="bg-gradient text-white p-2 rounded-lg">
                    <i class="fa fa-comments text-xl"></i>
                </div>
                <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient">智能对话助手</h1>
            </div>
            <div class="flex items-center space-x-4">
                <button id="upload-btn" class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-upload"></i>
                    <span class="hidden md:inline">上传文件</span>
                </button>
                <button id="settings-btn" class="text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
        <!-- 左侧边栏 - 对话历史 -->
        <aside class="lg:w-1/5 bg-white rounded-xl shadow-sm p-4 h-[calc(100vh-10rem)] hidden lg:block overflow-y-auto scrollbar-hide">
            <div class="mb-4">
                <h2 class="font-bold text-gray-700 mb-2">对话历史</h2>
                <div class="relative">
                    <input type="text" placeholder="搜索对话..." class="w-full pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>
            <div class="space-y-2">
                <div class="p-3 rounded-lg bg-primary/5 border-l-4 border-primary cursor-pointer hover:bg-primary/10 transition-colors">
                    <div class="font-medium">关于项目的讨论</div>
                    <div class="text-xs text-gray-500 mt-1">今天 14:30</div>
                </div>
                <div class="p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
                    <div class="font-medium">文件总结分析</div>
                    <div class="text-xs text-gray-500 mt-1">今天 10:15</div>
                </div>
                <div class="p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
                    <div class="font-medium">技术问题解答</div>
                    <div class="text-xs text-gray-500 mt-1">昨天 16:45</div>
                </div>
            </div>
            <div class="mt-6 pt-4 border-t border-gray-100">
                <h2 class="font-bold text-gray-700 mb-2">知识库</h2>
                <div class="space-y-2">
                    <div class="p-2 rounded-lg bg-gray-50 flex items-center justify-between cursor-pointer hover:bg-gray-100 transition-colors">
                        <span class="text-sm">项目文档</span>
                        <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">12 个文件</span>
                    </div>
                    <div class="p-2 rounded-lg bg-gray-50 flex items-center justify-between cursor-pointer hover:bg-gray-100 transition-colors">
                        <span class="text-sm">技术规范</span>
                        <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">8 个文件</span>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 中间对话区域 -->
        <section class="lg:w-3/5 bg-white rounded-xl shadow-sm h-[calc(100vh-10rem)] flex flex-col">
            <!-- 对话头部 -->
            <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="bg-gradient rounded-full w-10 h-10 flex items-center justify-center text-white">
                        <i class="fa fa-robot"></i>
                    </div>
                    <div>
                        <h2 class="font-bold">智能助手</h2>
                        <p class="text-xs text-gray-500">正在等待输入...</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-refresh"></i>
                    </button>
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-download"></i>
                    </button>
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            </div>

            <!-- 对话内容 -->
            <div id="chat-container" class="flex-1 p-4 overflow-y-auto scrollbar-hide space-y-4">
                <!-- 用户消息 -->
                <div class="flex items-start space-x-3 justify-end">
                    <div class="max-w-[80%]">
                        <div class="bg-primary text-white p-3 rounded-lg rounded-tr-none shadow-sm">
                            <p>你好，我需要你帮我总结一下这份项目报告。</p>
                        </div>
                        <div class="text-right text-xs text-gray-500 mt-1">14:30</div>
                    </div>
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0">
                        <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover rounded-full">
                    </div>
                </div>

                <!-- 系统消息 -->
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 rounded-full bg-gradient flex-shrink-0 flex items-center justify-center text-white">
                        <i class="fa fa-robot"></i>
                    </div>
                    <div class="max-w-[80%]">
                        <div class="bg-gray-50 p-3 rounded-lg rounded-tl-none shadow-sm">
                            <p>你好！我是你的智能助手，我可以帮你总结项目报告。请上传相关文件，我会帮你进行内容分析和总结。</p>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">14:31</div>
                    </div>
                </div>

                <!-- 用户消息 -->
                <div class="flex items-start space-x-3 justify-end">
                    <div class="max-w-[80%]">
                        <div class="bg-primary text-white p-3 rounded-lg rounded-tr-none shadow-sm">
                            <p>已上传项目报告.docx，请帮我总结主要内容和结论。</p>
                            <div class="mt-2 bg-white/20 rounded-lg p-2 flex items-center space-x-2">
                                <i class="fa fa-file-word-o"></i>
                                <span class="text-sm truncate">项目报告.docx</span>
                                <span class="text-xs ml-auto bg-white/30 px-2 py-0.5 rounded-full">2.4 MB</span>
                            </div>
                        </div>
                        <div class="text-right text-xs text-gray-500 mt-1">14:32</div>
                    </div>
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0">
                        <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-full h-full object-cover rounded-full">
                    </div>
                </div>

                <!-- 系统消息 - 带搜索中状态 -->
                <div class="flex items-start space-x-3">
                    <div class="w-8 h-8 rounded-full bg-gradient flex-shrink-0 flex items-center justify-center text-white">
                        <i class="fa fa-robot"></i>
                    </div>
                    <div class="max-w-[80%]">
                        <div class="bg-gray-50 p-3 rounded-lg rounded-tl-none shadow-sm">
                            <p>我正在分析文档内容，并搜索相关资料以提供更全面的总结。请稍候...</p>
                            <div class="mt-3 flex items-center space-x-2">
                                <div class="w-2 h-2 bg-primary rounded-full animate-bounce"></div>
                                <div class="w-2 h-2 bg-primary rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                                <div class="w-2 h-2 bg-primary rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="p-4 border-t border-gray-100">
                <div class="relative">
                    <textarea id="message-input" placeholder="输入消息..." class="w-full pl-4 pr-12 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none h-16 transition-all duration-300"></textarea>
                    <button id="send-btn" class="absolute right-3 bottom-3 bg-primary text-white p-2 rounded-full hover:bg-primary/90 transition-colors">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
                <div class="flex items-center justify-between mt-3">
                    <div class="flex items-center space-x-3">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-paperclip"></i>
                        </button>
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-microphone"></i>
                        </button>
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-camera"></i>
                        </button>
                    </div>
                    <button id="voice-btn" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-volume-up"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 右侧边栏 - 搜索结果和知识库 -->
        <aside class="lg:w-1/5 bg-white rounded-xl shadow-sm p-4 h-[calc(100vh-10rem)] hidden lg:block overflow-y-auto scrollbar-hide">
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <h2 class="font-bold text-gray-700">参考资料</h2>
                    <div class="flex space-x-1">
                        <button class="text-xs px-2 py-1 rounded bg-primary/10 text-primary">搜索</button>
                        <button class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-600">知识库</button>
                    </div>
                </div>
                <div class="relative">
                    <input type="text" placeholder="搜索网络..." class="w-full pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
                </div>
            </div>
            <div class="space-y-4">
                <div class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors cursor-pointer">
                    <div class="text-xs text-primary font-medium mb-1">网页搜索结果</div>
                    <h3 class="font-medium text-sm">项目管理最佳实践指南</h3>
                    <p class="text-xs text-gray-600 mt-1 line-clamp-2">本文介绍了项目管理的关键步骤和方法，包括项目规划、执行、监控和收尾阶段的最佳实践...</p>
                    <div class="text-xs text-gray-500 mt-2">https://example.com/project-management-guide</div>
                </div>
                <div class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors cursor-pointer">
                    <div class="text-xs text-primary font-medium mb-1">内部知识库</div>
                    <h3 class="font-medium text-sm">公司项目报告模板规范</h3>
                    <p class="text-xs text-gray-600 mt-1 line-clamp-2">本规范定义了公司内部项目报告的标准结构和内容要求，包括项目背景、目标、方法、结果和结论...</p>
                    <div class="text-xs text-gray-500 mt-2">上传于 2025-06-15</div>
                </div>
            </div>
        </aside>
    </main>

    <!-- 上传文件模态框 -->
    <div id="upload-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl shadow-lg p-6 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="font-bold text-lg">上传文件</h3>
                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer" id="drop-area">
                <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
                <p class="text-gray-600 mb-1">拖放文件到此处上传</p>
                <p class="text-xs text-gray-500">或</p>
                <button class="mt-3 text-primary font-medium">浏览文件</button>
                <input type="file" class="hidden" id="file-input" multiple>
            </div>
            <div class="mt-4">
                <p class="text-sm font-medium text-gray-700 mb-2">支持的格式: PDF, DOCX, TXT, XLSX</p>
                <div class="space-y-2" id="file-list">
                    <!-- 文件列表将在这里动态生成 -->
                </div>
            </div>
            <div class="mt-6 flex justify-end space-x-3">
                <button id="cancel-upload" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                <button id="confirm-upload" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">上传文件</button>
            </div>
        </div>
    </div>

    <script>
        // DOM元素
        const chatContainer = document.getElementById('chat-container');
        const messageInput = document.getElementById('message-input');
        const sendBtn = document.getElementById('send-btn');
        const uploadBtn = document.getElementById('upload-btn');
        const uploadModal = document.getElementById('upload-modal');
        const modalContent = document.getElementById('modal-content');
        const closeModal = document.getElementById('close-modal');
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('file-input');
        const fileList = document.getElementById('file-list');
        const cancelUpload = document.getElementById('cancel-upload');
        const confirmUpload = document.getElementById('confirm-upload');
        const settingsBtn = document.getElementById('settings-btn');
        const voiceBtn = document.getElementById('voice-btn');

        // 模拟数据 - 对话历史
        const chatHistory = [
            {
                sender: 'user',
                message: '你好，我需要你帮我总结一下这份项目报告。',
                time: '14:30',
                files: []
            },
            {
                sender: 'ai',
                message: '你好！我是你的智能助手，我可以帮你总结项目报告。请上传相关文件，我会帮你进行内容分析和总结。',
                time: '14:31',
                files: []
            },
            {
                sender: 'user',
                message: '已上传项目报告.docx，请帮我总结主要内容和结论。',
                time: '14:32',
                files: [
                    {name: '项目报告.docx', size: '2.4 MB', type: 'word'}
                ]
            },
            {
                sender: 'ai',
                message: '我正在分析文档内容，并搜索相关资料以提供更全面的总结。请稍候...',
                time: '14:33',
                files: [],
                loading: true
            }
        ];

        // 模拟数据 - 知识库
        const knowledgeBase = [
            {
                title: '项目管理最佳实践指南',
                source: '网页搜索',
                content: '本文介绍了项目管理的关键步骤和方法，包括项目规划、执行、监控和收尾阶段的最佳实践...',
                url: 'https://example.com/project-management-guide',
                date: '2025-07-01'
            },
            {
                title: '公司项目报告模板规范',
                source: '内部知识库',
                content: '本规范定义了公司内部项目报告的标准结构和内容要求，包括项目背景、目标、方法、结果和结论...',
                url: 'internal://knowledge-base/report-template',
                date: '2025-06-15'
            }
        ];

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            // 渲染对话历史
            renderChatHistory();
            
            // 自动调整输入框高度
            messageInput.addEventListener('input', adjustTextareaHeight);
            
            // 发送消息
            sendBtn.addEventListener('click', sendMessage);
            messageInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            // 上传文件
            uploadBtn.addEventListener('click', openUploadModal);
            closeModal.addEventListener('click', closeUploadModal);
            cancelUpload.addEventListener('click', closeUploadModal);
            
            // 文件上传相关
            dropArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                dropArea.classList.add('border-primary');
            });
            
            dropArea.addEventListener('dragleave', () => {
                dropArea.classList.remove('border-primary');
            });
            
            dropArea.addEventListener('drop', (e) => {
                e.preventDefault();
                dropArea.classList.remove('border-primary');
                
                if (e.dataTransfer.files.length > 0) {
                    handleFiles(e.dataTransfer.files);
                }
            });
            
            dropArea.addEventListener('click', () => {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', () => {
                if (fileInput.files.length > 0) {
                    handleFiles(fileInput.files);
                }
            });
            
            confirmUpload.addEventListener('click', uploadFiles);
            
            // 设置按钮
            settingsBtn.addEventListener('click', () => {
                alert('设置功能正在开发中...');
            });
            
            // 语音按钮
            voiceBtn.addEventListener('click', () => {
                alert('语音功能正在开发中...');
            });
        });

        // 渲染对话历史
        function renderChatHistory() {
            chatContainer.innerHTML = '';
            
            chatHistory.forEach((message, index) => {
                const messageElement = createMessageElement(message, index);
                chatContainer.appendChild(messageElement);
            });
            
            // 滚动到底部
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // 创建消息元素
        function createMessageElement(message, index) {
            const messageDiv = document.createElement('div');
            messageDiv.className = message.sender === 'user' 
                ? 'flex items-start space-x-3 justify-end' 
                : 'flex items-start space-x-3';
            
            const contentDiv = document.createElement('div');
            contentDiv.className = message.sender === 'user' ? 'max-w-[80%]' : 'max-w-[80%]';
            
            const bubbleDiv = document.createElement('div');
            bubbleDiv.className = message.sender === 'user' 
                ? 'bg-primary text-white p-3 rounded-lg rounded-tr-none shadow-sm' 
                : 'bg-gray-50 p-3 rounded-lg rounded-tl-none shadow-sm';
            
            const messageText = document.createElement('p');
            messageText.textContent = message.message;
            bubbleDiv.appendChild(messageText);
            
            // 添加文件
            if (message.files && message.files.length > 0) {
                message.files.forEach(file => {
                    const fileDiv = document.createElement('div');
                    fileDiv.className = 'mt-2 bg-white/20 rounded-lg p-2 flex items-center space-x-2';
                    
                    const fileIcon = document.createElement('i');
                    fileIcon.className = `fa fa-file-${file.type === 'word' ? 'word' : file.type === 'pdf' ? 'pdf' : 'text'}-o`;
                    
                    const fileName = document.createElement('span');
                    fileName.className = 'text-sm truncate';
                    fileName.textContent = file.name;
                    
                    const fileSize = document.createElement('span');
                    fileSize.className = 'text-xs ml-auto bg-white/30 px-2 py-0.5 rounded-full';
                    fileSize.textContent = file.size;
                    
                    fileDiv.appendChild(fileIcon);
                    fileDiv.appendChild(fileName);
                    fileDiv.appendChild(fileSize);
                    bubbleDiv.appendChild(fileDiv);
                });
            }
            
            // 添加加载状态
            if (message.loading) {
                const loadingDiv = document.createElement('div');
                loadingDiv.className = 'mt-3 flex items-center space-x-2';
                
                for (let i = 0; i < 3; i++) {
                    const dot = document.createElement('div');
                    dot.className = 'w-2 h-2 bg-primary rounded-full animate-bounce';
                    if (i === 1) dot.style.animationDelay = '0.2s';
                    if (i === 2) dot.style.animationDelay = '0.4s';
                    loadingDiv.appendChild(dot);
                }
                
                bubbleDiv.appendChild(loadingDiv);
            }
            
            contentDiv.appendChild(bubbleDiv);
            
            // 添加时间戳
            const timeDiv = document.createElement('div');
            timeDiv.className = message.sender === 'user' 
                ? 'text-right text-xs text-gray-500 mt-1' 
                : 'text-xs text-gray-500 mt-1';
            timeDiv.textContent = message.time;
            contentDiv.appendChild(timeDiv);
            
            messageDiv.appendChild(contentDiv);
            
            // 添加头像
            if (message.sender === 'user') {
                const avatarDiv = document.createElement('div');
                avatarDiv.className = 'w-8 h-8 rounded-full bg-gray-200 flex-shrink-0';
                
                const avatarImg = document.createElement('img');
                avatarImg.src = 'https://picsum.photos/200/200?random=1';
                avatarImg.alt = '用户头像';
                avatarImg.className = 'w-full h-full object-cover rounded-full';
                
                avatarDiv.appendChild(avatarImg);
                messageDiv.appendChild(avatarDiv);
            } else {
                const avatarDiv = document.createElement('div');
                avatarDiv.className = 'w-8 h-8 rounded-full bg-gradient flex-shrink-0 flex items-center justify-center text-white';
                
                const avatarIcon = document.createElement('i');
                avatarIcon.className = 'fa fa-robot';
                
                avatarDiv.appendChild(avatarIcon);
                messageDiv.insertBefore(avatarDiv, contentDiv);
            }
            
            return messageDiv;
        }

        // 发送消息
        function sendMessage() {
            const message = messageInput.value.trim();
            if (!message && fileList.children.length === 0) return;
            
            // 添加用户消息到历史
            const now = new Date();
            const timeString = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
            
            const files = [];
            Array.from(fileList.children).forEach(fileItem => {
                const fileName = fileItem.querySelector('.file-name').textContent;
                const fileSize = fileItem.querySelector('.file-size').textContent;
                const fileType = fileName.split('.').pop().toLowerCase();
                
                files.push({
                    name: fileName,
                    size: fileSize,
                    type: fileType === 'docx' || fileType === 'doc' ? 'word' : 
                          fileType === 'pdf' ? 'pdf' : 
                          fileType === 'txt' ? 'text' : 
                          fileType === 'xlsx' || fileType === 'xls' ? 'excel' : 'file'
                });
            });
            
            chatHistory.push({
                sender: 'user',
                message: message || '上传了文件',
                time: timeString,
                files: files
            });
            
            // 添加AI回复（加载状态）
            chatHistory.push({
                sender: 'ai',
                message: '我正在处理您的请求，请稍候...',
                time: timeString,
                files: [],
                loading: true
            });
            
            // 清空输入
            messageInput.value = '';
            adjustTextareaHeight();
            fileList.innerHTML = '';
            closeUploadModal();
            
            // 重新渲染对话
            renderChatHistory();
            
            // 模拟API调用
            setTimeout(() => {
                // 移除加载状态
                chatHistory.pop();
                
                // 添加实际回复
                let aiResponse = '';
                
                if (message.toLowerCase().includes('总结') || files.length > 0) {
                    aiResponse = '我已经总结了项目报告的主要内容：\n\n1. 项目背景和目标\n2. 主要研究方法和实施步骤\n3. 关键发现和成果\n4. 分析和讨论\n5. 结论和建议\n\n需要我提供更详细的内容或对特定部分进行解释吗？';
                    
                    // 添加搜索结果到知识库
                    if (Math.random() > 0.5) {
                        setTimeout(() => {
                            updateKnowledgeBase();
                        }, 1000);
                    }
                } else if (message.toLowerCase().includes('你好') || message.toLowerCase().includes('嗨') || message.toLowerCase().includes('哈喽')) {
                    aiResponse = '你好！我是你的智能助手，可以帮你处理文件、回答问题、搜索信息等。请问有什么可以帮助你的？';
                } else {
                    aiResponse = '我理解您的问题是："' + message + '"。我正在搜索相关信息并进行分析，请稍候。';
                }
                
                chatHistory.push({
                    sender: 'ai',
                    message: aiResponse,
                    time: new Date().getHours().toString().padStart(2, '0') + ':' + new Date().getMinutes().toString().padStart(2, '0'),
                    files: []
                });
                
                renderChatHistory();
            }, 2000);
        }

        // 更新知识库侧边栏
        function updateKnowledgeBase() {
            // 这里只是模拟，实际项目中需要从服务器获取数据
            const knowledgeBaseContainer = document.querySelector('aside.lg\\:w-1\\/5:last-child .space-y-4');
            if (!knowledgeBaseContainer) return;
            
            knowledgeBase.forEach(item => {
                const existingItem = knowledgeBaseContainer.querySelector(`[data-title="${item.title}"]`);
                if (existingItem) return;
                
                const itemDiv = document.createElement('div');
                itemDiv.className = 'bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors cursor-pointer';
                itemDiv.setAttribute('data-title', item.title);
                
                const sourceSpan = document.createElement('div');
                sourceSpan.className = 'text-xs text-primary font-medium mb-1';
                sourceSpan.textContent = item.source;
                
                const titleH3 = document.createElement('h3');
                titleH3.className = 'font-medium text-sm';
                titleH3.textContent = item.title;
                
                const contentP = document.createElement('p');
                contentP.className = 'text-xs text-gray-600 mt-1 line-clamp-2';
                contentP.textContent = item.content;
                
                const footerDiv = document.createElement('div');
                footerDiv.className = 'text-xs text-gray-500 mt-2';
                footerDiv.textContent = item.url.includes('internal') ? `上传于 ${item.date}` : item.url;
                
                itemDiv.appendChild(sourceSpan);
                itemDiv.appendChild(titleH3);
                itemDiv.appendChild(contentP);
                itemDiv.appendChild(footerDiv);
                
                // 添加动画效果
                itemDiv.style.opacity = '0';
                itemDiv.style.transform = 'translateY(10px)';
                
                knowledgeBaseContainer.appendChild(itemDiv);
                
                // 触发重排后添加动画
                setTimeout(() => {
                    itemDiv.style.opacity = '1';
                    itemDiv.style.transform = 'translateY(0)';
                    itemDiv.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                }, 10);
            });
        }

        // 调整文本框高度
        function adjustTextareaHeight() {
            messageInput.style.height = 'auto';
            messageInput.style.height = (messageInput.scrollHeight > 38 ? Math.min(messageInput.scrollHeight, 120) : 38) + 'px';
        }

        // 打开上传模态框
        function openUploadModal() {
            uploadModal.classList.remove('hidden');
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }

        // 关闭上传模态框
        function closeUploadModal() {
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                uploadModal.classList.add('hidden');
            }, 300);
        }

        // 处理文件
        function handleFiles(files) {
            fileList.innerHTML = '';
            
            Array.from(files).forEach(file => {
                const fileSize = formatFileSize(file.size);
                const fileItem = document.createElement('div');
                fileItem.className = 'flex items-center justify-between p-2 bg-gray-50 rounded-lg';
                
                const fileInfo = document.createElement('div');
                fileInfo.className = 'flex items-center space-x-2';
                
                const fileIcon = document.createElement('i');
                const fileExt = file.name.split('.').pop().toLowerCase();
                
                if (fileExt === 'pdf') {
                    fileIcon.className = 'fa fa-file-pdf-o text-red-500';
                } else if (fileExt === 'docx' || fileExt === 'doc') {
                    fileIcon.className = 'fa fa-file-word-o text-blue-500';
                } else if (fileExt === 'xlsx' || fileExt === 'xls') {
                    fileIcon.className = 'fa fa-file-excel-o text-green-500';
                } else if (fileExt === 'jpg' || fileExt === 'jpeg' || fileExt === 'png') {
                    fileIcon.className = 'fa fa-file-image-o text-purple-500';
                } else {
                    fileIcon.className = 'fa fa-file-o text-gray-500';
                }
                
                const fileName = document.createElement('span');
                fileName.className = 'file-name text-sm truncate max-w-[150px]';
                fileName.textContent = file.name;
                
                const fileSizeSpan = document.createElement('span');
                fileSizeSpan.className = 'file-size text-xs text-gray-500';
                fileSizeSpan.textContent = fileSize;
                
                const removeBtn = document.createElement('button');
                removeBtn.className = 'text-gray-400 hover:text-red-500 transition-colors';
                removeBtn.innerHTML = '<i class="fa fa-times"></i>';
                removeBtn.addEventListener('click', () => {
                    fileItem.remove();
                });
                
                fileInfo.appendChild(fileIcon);
                fileInfo.appendChild(fileName);
                fileItem.appendChild(fileInfo);
                fileItem.appendChild(fileSizeSpan);
                fileItem.appendChild(removeBtn);
                
                fileList.appendChild(fileItem);
            });
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 上传文件
        function uploadFiles() {
            if (fileList.children.length === 0) {
                alert('请选择要上传的文件');
                return;
            }
            
            // 模拟上传进度
            const progressModal = document.createElement('div');
            progressModal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
            
            const progressContent = document.createElement('div');
            progressContent.className = 'bg-white rounded-xl shadow-lg p-6 max-w-md w-full mx-4';
            
            const progressTitle = document.createElement('h3');
            progressTitle.className = 'font-bold text-lg mb-4';
            progressTitle.textContent = '正在上传文件...';
            
            const progressBarContainer = document.createElement('div');
            progressBarContainer.className = 'w-full bg-gray-200 rounded-full h-2.5 mb-4';
            
            const progressBar = document.createElement('div');
            progressBar.className = 'bg-primary h-2.5 rounded-full';
            progressBar.style.width = '0%';
            
            const progressText = document.createElement('p');
            progressText.className = 'text-sm text-gray-600 text-center';
            progressText.textContent = '0% 完成';
            
            progressBarContainer.appendChild(progressBar);
            progressContent.appendChild(progressTitle);
            progressContent.appendChild(progressBarContainer);
            progressContent.appendChild(progressText);
            progressModal.appendChild(progressContent);
            
            document.body.appendChild(progressModal);
            
            // 模拟上传进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    
                    setTimeout(() => {
                        progressTitle.textContent = '上传完成';
                        progressText.textContent = '文件已成功上传';
                        
                        setTimeout(() => {
                            document.body.removeChild(progressModal);
                            closeUploadModal();
                            sendMessage();
                        }, 1000);
                    }, 500);
                }
                
                progressBar.style.width = progress + '%';
                progressText.textContent = Math.round(progress) + '% 完成';
            }, 300);
        }
    </script>
</body>
</html>    